<template>
  <div class="nav-header">
    <a class="logo-link" href="https://hotent.com" target="_blank">
      <ht-icon name="hotent" scale="2" />
      <span>
        Hotent UI
      </span>
    </a>

    <div class="nav-menu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="introduce">介绍</el-menu-item>
        <el-menu-item index="guide">指南</el-menu-item>
        <el-menu-item index="component">组件</el-menu-item>
        <!-- <el-menu-item index="resource">资源</el-menu-item> -->
        <el-menu-item index="design">
          设计
        </el-menu-item>
      </el-menu>
      <LangSelect />
    </div>
  </div>
</template>

<script>
  import LangSelect from '../components/LangSelect.vue'
  const pathRegExp = /^\/(\w+).*$/

  export default {
    name: 'Navigator',
    components: { LangSelect },
    data() {
      return {
        activeIndex: 'introduce',
      }
    },
    watch: {
      $route: function(newVal) {
        this.$nextTick(() => {
          if (!newVal.path.startsWith(`/${this.activeIndex}`)) {
            var match = pathRegExp.exec(newVal.path)
            if (match != null) {
              this.activeIndex = match[1]
            }
          }
        })
      },
    },
    methods: {
      handleSelect(item) {
        if (item == 'design') {
          window.open('https://www.hotent.com/', '_blank')
        } else {
          this.$router.push({ path: `/${item}` })
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .nav-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    border-bottom: 1px solid #e6e6e6;
    position: fixed;
    background-color: #fff;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 24px;
    z-index: 1000;
    -webkit-box-shadow: 0 2px 8px #f0f1f2;
    box-shadow: 0 2px 8px #f0f1f2;

    .logo-link {
      display: flex;
      margin-left: 30px;
      text-decoration: none;

      span {
        font-weight: bold;
        font-size: 30px;
        color: #333;
        margin-left: 10px;
      }
    }
    .el-menu-demo {
      border-bottom-width: 0;
      .el-menu-item {
        font-size: 14px;
      }
    }

    .nav-menu {
      display: flex;
      align-items: center;
    }
  }
</style>
